<template>
  <div class="wrapper">
    <van-nav-bar
        title="外勤日历"
        left-arrow
        left-text="返回"
        @click-left="back"
    />
    <!--日历组件-->
    <div>
      <van-field
          readonly
          clickable
          label="年月"
          v-model="calendarDate"
          placeholder="请选择年月"
          @click="showPickerDate = true"
      />
      <van-field
          readonly
          clickable
          label="查找"
          v-model="ftypeName"
          placeholder="请选择"
          @click="showPickerFtype = true"
      />
      <van-button type="info" size="large" style="margin:10px 0" @click="getCalendarList()">查询</van-button>
      <van-calendar
          ref="calendarList"
          :formatter="formatter"
          :default-date="null"
          :lazy-render="false"
          :show-confirm="false"
          :poppable="false"
          :min-date="minDate"
          :max-date="maxDate"
          @select="handleSelect"
      >
        <template #title>
          <div v-if="currentDate">
            <p>{{ moment(currentDate).format('YYYY年MM月') }}</p>
          </div>
        </template>
      </van-calendar>
    </div>
    <!--选择年月-->
    <van-popup v-model="showPickerDate" position="bottom">
      <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title="外勤日历"
          @confirm = "changeDate"
          @cancel="showPickerDate = false"
      />
    </van-popup>
    <!--数据字典选择-->
    <van-popup v-model="showPickerFtype" position="bottom">
      <van-picker
          title="查找"
          show-toolbar
          :columns="columnsFun"
          @confirm="changeFun"
          @cancel="showPickerFtype = false"
      />
    </van-popup>
  </div>
</template>

<script>
  import { calendarList, getDicts } from '@/api/api'
  import moment from "moment";

  export default {
    name: "calendarList",
    data () {
      return {
        ftypeName: '全部',
        ftype: '1',
        showPickerDate: false,
        showPickerFtype: false,
        calendarDate: moment().format('YYYY-MM'),
        currentDate: new Date(),
        minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
        maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
        list: [],
        columnsFun: [],
      }
    },
    created(){
      // this.getCalendarList(new Date().getFullYear(), new Date().getMonth()+1)
      this.getCalendarList()
      getDicts('rltype').then(res => {
        if(res.success) {
          this.columnsFun= res.result.map(item => {
            return {
              text: item.text,
              code: item.value
            }
          })
        }
      })
    },
    methods: {
      moment,
      changeFun (value) {
        this.ftype = value.code
        this.ftypeName = value.text
        this.showPickerFtype = false
      },
      formatter (day) {
        let currentDay = moment(day.date).format('YYYY-MM-DD')
        this.list.map(item => {
          if (item.fday == currentDay) {
            if (item.fcolor == 0) {
              day.className = 'extrantName1'
            } else if (item.fcolor == 1) {
              day.className  = 'extrantName2'
            }else {
              day.className  = 'extrantName3'
            }
          }
        })
        return day
      },
      changeDate (val) {
        this.calendarDate = moment(val).format('YYYY-MM')
        this.minDate = new Date(new Date(val).getFullYear(), new Date(val).getMonth(), 1)
        this.minDate = new Date(new Date(val).getFullYear(), new Date(val).getMonth() + 1, 0)
        // this.getCalendarList(new Date(val).getFullYear(), new Date(val).getMonth()+1)
        this.showPickerDate = false
      },
      getCalendarList () {
        let fyear = this.calendarDate.split('-')[0]
        let fmonth = this.calendarDate.split('-')[1]
        console.log(this.calendarDate)
        calendarList({
          fyear,
          fmonth,
          ftype: this.ftype
        }).then(res => {
          if (res.success) {
            this.list = res.result
          }
        })
      },
      handleSelect (val) {
        console.log(val)
        let fday = moment(val).format('YYYY-MM-DD')
        this.$router.push({name: 'calendarDetail', params: {
            fday,
            ftype: this.ftype
          }
        })
      },
      back () {
        this.$router.push({name: 'modules'})
      }
    },
  }
</script>

<style scoped>
.wrapper {
  /*min-height: 100vh;*/
  /*background: #ffffff;*/
}
/deep/.van-calendar__header-subtitle {
  display: none!important;
}
/deep/.extrantName1 {
  color: #969799;
}
/deep/.extrantName2 {
  color: #07c160;
  background-color: #57a3f3;
  border-radius: 50%;
  font-weight: bold;
}
/deep/.extrantName3 {
  color: #07c160;
  background-color: #f44336;
  border-radius: 50%;
  font-weight: bold;
}
</style>